<template>
  <div id="animation"></div>
</template>

<script setup>
import { onMounted } from 'vue'
import * as THREE from 'three'
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js'

/**
 * 几何顶点位置数据和点模型
 * 步骤：
 * 1. 创建一个 BufferGeometry 实例，用于存储顶点数据
 * 2. 创建一个 Float32Array 实例，用来表示x、y、z坐标数据
 * 3. 创建一个 BufferAttribute 实例，将顶点数据存储到 BufferGeometry 实例中
 * 4. 通过setAttribute设计几何体的顶点位置
 * 
 * 点模型
 * 1. 创建一个 PointsMaterial 实例，设置点的颜色和大小
 * 2. 创建一个 Points 实例，传入 BufferGeometry 实例和 PointsMaterial 实例
 */
const geometry = new THREE.BufferGeometry()
const vertices = new Float32Array([
	-1.0, -1.0,  1.0, // v0
	 1.0, -1.0,  1.0, // v1
	 1.0,  1.0,  1.0, // v2
   
	 1.0,  1.0,  1.0, // v3
	-1.0,  1.0,  1.0, // v4
	-1.0, -1.0,  1.0  // v5
])
const attribute = new THREE.BufferAttribute(vertices, 3)
geometry.setAttribute('position', attribute)
const material = new THREE.PointsMaterial( { 
  color: 0xff0000,
  size: .2, 
} );
const points = new THREE.Points( geometry, material );

/**
 * 场景
 */
const scene = new THREE.Scene()
scene.add(points)

/**
 * 相机
 */
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000)
camera.position.z = 10

const animate = () => {
  requestAnimationFrame(animate)
  points.rotation.x += 0.01
  points.rotation.y += 0.01
  renderer.render(scene, camera)
}

/**
 * 渲染器
 */
const renderer = new THREE.WebGLRenderer()
renderer.setSize(window.innerWidth, window.innerHeight)
onMounted(() => {
  const controls = new OrbitControls(camera, renderer.domElement)
  document.getElementById('animation').appendChild(renderer.domElement)
  renderer.render(scene, camera)
  controls.onChange = () => renderer.render(scene, camera)
  animate()
})
</script>

<style>

</style>